<template>
	<div class="role-detail-container" v-loading="loading">
		<!-- 头部 -->
		<el-card class="mb-6">
			<div class="header-content">
				<h3 class="role-title">{{ roleData.roleName }}</h3>
				<div class="action-buttons">
					<el-button type="primary" :icon="Edit" @click="handleEdit">
						编辑角色权限
					</el-button>
					<el-button :icon="Delete" @click="handleDelete">
						删除角色
					</el-button>
				</div>
			</div>

			<el-card shadow="never" class="mt-4">
				<div class="basic-info">
					<div class="info-item">
						<span class="info-label">角色ID</span>
						<span class="info-value">{{ roleData.id }}</span>
					</div>
				</div>
			</el-card>
		</el-card>

		<!-- Main Content -->
		<div class="main-content">
			<!-- Left Content (8 columns) -->
			<div class="left-content">
				<!-- 权限列表 -->
				<el-card>
					<template #header>
						<div class="card-header">
							<span>权限列表</span>
						</div>
					</template>

					<div class="permission-list">
						<el-table :data="roleData.permissions" style="width: 100%">
							<el-table-column prop="permCode" label="权限代码" width="120" />
							<el-table-column prop="permName" label="权限名称" />
							<el-table-column prop="description" label="权限描述" />
						</el-table>
					</div>
				</el-card>

				<!-- 角色描述 -->
<!-- 				<el-card class="mt-6">
					<template #header>
						<div class="card-header">
							<span>角色描述</span>
						</div>
					</template>

					<div class="role-description">
						<el-empty v-if="!roleData.description" description="暂无角色描述" :image-size="80" />
						<p v-else class="description-text">{{ roleData.description }}</p>
					</div>
				</el-card> -->
			</div>

			<!-- 系统信息 -->
			<div class="right-sidebar">
				<el-card>
					<template #header>
						<div class="card-header">
							<span>系统信息</span>
						</div>
					</template>

					<div class="system-info">
						<div class="info-item">
							<span class="info-label">创建时间</span>
							<span class="info-value">{{ roleData.createdAt }}</span>
						</div>
						<div class="info-item">
							<span class="info-label">更新时间</span>
							<span class="info-value">{{ roleData.updatedAt }}</span>
						</div>
					</div>
				</el-card>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'RoleDetailView',
	};
</script>

<script setup>
	import {
		getRoleDetail,
		removeRole
	} from '@/api/role.js'
	import {
		ref,
		computed,
		onMounted
	} from 'vue'
	import {
		Edit,
		Delete
	} from '@element-plus/icons-vue'
	import {
		useRoute,
		useRouter
	} from 'vue-router'
	import {
		ElMessage,
		ElMessageBox
	} from 'element-plus'

	const route = useRoute()
	const router = useRouter()
	const loading = ref(false)
	const roleId = ref(route.params.id)
	const roleData = ref({
		permissions: []
	})

	/**
	 * 获取角色详情
	 */
	const fetchRoleData = async () => {
		loading.value = true
		try {
			const res = await getRoleDetail(roleId.value)
			if (res.data) {
				roleData.value = res.data
			}
		} catch (error) {
			ElMessage.error('获取角色详情失败')
		} finally {
			loading.value = false
		}
	}

	// 获取角色数据
	onMounted(() => {
		fetchRoleData()
	})

	// 处理编辑
	const handleEdit = () => {
		router.push(`/user/rolePermission/edit/${roleId.value}`)
	}

	// 处理删除
	const handleDelete = () => {
		ElMessageBox.confirm(
			'确定要删除该角色吗？删除后不可恢复！',
			'删除角色', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
			}
		).then(async () => {
			try {
				await removeRole(roleId.value)
				ElMessage.success('删除角色成功')
				router.push('/role')
			} catch (error) {
				ElMessage.error('删除角色失败')
			}
		}).catch(() => {
			ElMessage.info('已取消删除')
		})
	}
</script>

<style scoped>
	.role-detail-container {
		display: flex;
		flex-direction: column;
		height: 100%;
		min-height: 0;
		overflow-y: auto;
	}

	.header-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.role-title {
		font-size: 20px;
		font-weight: 600;
		color: #303133;
		margin: 0;
	}

	.action-buttons {
		display: flex;
		align-items: center;
		gap: 12px;
	}

	.basic-info {
		display: flex;
		gap: 24px;
	}

	.info-item {
		display: flex;
		flex-direction: column;
	}

	.info-label {
		font-size: 14px;
		color: #909399;
	}

	.info-value {
		font-size: 16px;
		font-weight: 500;
		color: #303133;
	}

	.main-content {
		flex: 1;
		display: flex;
		gap: 20px;
		min-height: 0;
	}

	.left-content {
		flex: 2;
		min-width: 0;
	}

	.right-sidebar {
		flex: 1;
		position: relative;
		max-height: calc(100vh - 200px);
	}

	.card-header {
		font-size: 16px;
		font-weight: 600;
		color: #303133;
	}

	.system-info {
		display: flex;
		flex-direction: column;
		gap: 12px;
	}

	.permission-list {
		width: 100%;
	}

	.role-description {
		min-height: 100px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.description-text {
		margin: 0;
		font-size: 14px;
		color: #606266;
		line-height: 1.6;
	}

	.mt-6 {
		margin-top: 24px;
	}

	.mb-6 {
		margin-bottom: 24px;
	}
</style>